import React, { useState, useEffect, useRef } from "react";
import logo from "./logo.svg";
import img1 from "./imgs/4.jpg";
import img2 from "./imgs/7.jpeg";
import video1 from "./imgs/1.mp4";
import video2 from "./imgs/2.mp4";

// import { LinearCopy } from "gl-react";
// import { Surface } from "gl-react-dom";
// import GLTransition from "react-gl-transition";
// import GLTransitions from "gl-transitions";
// import timeLoop from "./timeLoop";
// import images from "./images";
import "./App.css";
import { Surface } from "gl-react-dom";
import GLTransition from "react-gl-transition";
import GLTransitions from "gl-transitions";

function App() {
  let source1 = useRef(),
    source2 = useRef();
  useEffect(() => {
    // Update the document title using the browser API
    const finalVideo1 = document.getElementById("finalVideo1");
    const finalVideo2 = document.getElementById("finalVideo2");
    let recorder1, recorder2;

    const canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      image = new Image(),
      video = document.getElementById("video");

    const canvas2 = document.getElementById("canvas2"),
      context2 = canvas2.getContext("2d"),
      image2 = new Image(),
      video2 = document.getElementById("video2");

    // 将canvas转成视频
    function canvas2video(canvas, finalVideo, recorder) {
      const stream = canvas.captureStream();
      recorder = new MediaRecorder(stream, { mimeType: "video/webm" });
      const data = [];
      recorder.ondataavailable = function (event) {
        if (event.data && event.data.size) {
          data.push(event.data);
        }
      };
      recorder.onstop = () => {
        const url = URL.createObjectURL(new Blob(data, { type: "video/webm" }));

        finalVideo.style.display = "inline-block";
        finalVideo.src = url;
      };
      return recorder;
    }

    recorder1 = canvas2video(canvas, finalVideo1, recorder1);
    recorder2 = canvas2video(canvas2, finalVideo2, recorder2);

    function animate(ctx, video, img) {
      if (!video.end) {
        ctx.drawImage(video, 0, 0, 300, 300);
        window.requestAnimationFrame(function () {
          animate(ctx, video, img);
        });
        ctx.drawImage(img, 10, 10, 100, 120);
      }
    }
    function canplaythrough(video, recorder, context, image) {
      video.oncanplaythrough = function (e) {
        video.play();
        recorder.start();
        setTimeout(() => {
          recorder.stop();
        }, 10000);
        window.requestAnimationFrame(function () {
          animate(context, video, image);
        });
      };
    }

    // 视频1
    image.src = img1;
    image.onload = function (e) {
      context.drawImage(image, 10, 10, 100, 120);
    };
    canplaythrough(video, recorder1, context, image);

    // 视频2
    image2.src = img2;
    image2.onload = function (e) {
      context2.drawImage(image, 10, 10, 100, 120);
    };
    canplaythrough(video2, recorder2, context2, image2);
  });

  const images = "wxqlQkh,G2Whuq3,0bUSEBX,giP58XN,iKdXwVm,IvpoR40,zJIxPEo,CKlmtPs,fnMylHI,vGXYiYy,MnOB9Le,YqsZKgc,0BJobQo,Otbz312"
    .split(",")
    .map((id) => `https://i.imgur.com/${id}.jpg`);

  // const Slideshow = timeLoop(({ slides, delay, duration, time }) => {
  //   const index = Math.floor(time / (delay + duration));
  //   const from = slides[index % slides.length];
  //   const to = slides[(index + 1) % slides.length];
  //   const transition = GLTransitions[index % GLTransitions.length];
  //   const total = delay + duration;
  //   const progress = (time - index * total - delay) / duration;
  //   return progress > 0 ? (
  //     <GLTransition
  //       from={from}
  //       to={to}
  //       progress={progress}
  //       transition={transition}
  //     />
  //   ) : (
  //     <LinearCopy>{from}</LinearCopy>
  //   );
  // });
  let [progress, setProgress] = useState(0);
  let index = 0;
  let [from, setFrom] = useState(images[index]);
  let [to, setTo] = useState(images[index + 1]);
  // const timer = setInterval(() => {
  //   progress += 0.1;
  //   setProgress(progress + 0.1);
  //   if (progress >= 1) {
  //     setProgress(0);
  //     index++;
  //     setFrom(images[index]);
  //     setTo(images[index + 1]);
  //     if (index + 1 === 5) {
  //       clearInterval(timer);
  //     }
  //   }
  // }, 100);
  console.log(GLTransitions);
  return (
    <div className="App">
      <div className="content">
        <div className="left">
          <video
            ref={source1}
            controls
            width="200"
            height="200"
            id="video"
            preload="true"
            src={video1}
            muted
            controls
          ></video>
          <video
            ref={source2}
            controls
            width="200"
            height="200"
            id="video2"
            preload="true"
            src={video2}
            muted
            controls
          ></video>
        </div>
        <div>
          <canvas
            id="canvas"
            width="300"
            height="300"
            style={{ marginRight: "50px" }}
          >
            不支持canvas
          </canvas>
          <canvas id="canvas2" width="300" height="300">
            不支持canvas
          </canvas>
        </div>
        5s 后录制完成
        <div className="final-videos">
          <video
            id="finalVideo1"
            controls
            style={{
              display: "none",
            }}
          ></video>
          <video
            id="finalVideo2"
            style={{
              display: "none",
            }}
            controls
          ></video>
        </div>
        <div>
          <button id="transBtn">加转场动画</button>
        </div>
      </div>
      {/* <Surface width={300} height={300}>
        <GLTransition
          progress={0.5}
          from={from}
          to={to}
          transition={GLTransitions[4]}
        />
      </Surface> */}
    </div>
  );
}

export default App;
